<template>
  <div style="display: flex;justify-content: end;">
    <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="props.pageNum"
      :page-sizes="[pageSize, 20, 30, 50]" v-model:page-size="props.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total" background>
    </el-pagination>
  </div>
</template>

<script setup>
const props = defineProps({ pageNum: Number, pageSize: Number, total: Number })
const emit = defineEmits(['update:pageNum', 'update:pageSize', 'initData'])
const pageSize = props.pageSize
const sizeChange = (val) => {
  emit('update:pageSize', val)
  emit('initData')
}
const currentChange = (val) => {
  emit('update:pageNum', val)
  emit('initData')
}
</script>

<style lang="scss" scoped></style>